import G6 from '@antv/g6';

export function addToolbar(dom: any) {
    let container;
    if(typeof dom === 'string') {
        container = document.getElementById(dom);
    } else {
        container = dom;
    }

    const tc = document.createElement('div');
    tc.id = 'toolbarContainer';
    container.appendChild(tc);

    const toolbar = new G6.ToolBar({
        container: tc,
        getContent: () => {
            return `
        <ul class='g6-tool-btns'>
            <li class="g6-tool-btn" code='download' title='下载'><img src='./images/topology/download.svg'/></li> 
            <li class="g6-tool-btn" code='realZoom' title='还原'><img src='./images/topology/realzoom.svg'/></li>
            <li class="g6-tool-btn" code='zoomOut' title='放大'><img src='./images/topology/zoomin.svg'/></li>
            <li class="g6-tool-btn" code='zoomIn' title='缩小'><img src='./images/topology/zoomout.svg'/></li>
        </ul>`
        },
        handleClick: (code: any, graph: any) => {
            var currentZoom = graph.getZoom();

            if (code === 'download') {
                graph.downloadFullImage('拓扑图', 'image/png', {
                    backgroundColor: '#ddd'
                })
            }

            if (code === 'realZoom') {
                graph.zoomTo(1);
                graph.fitCenter();
            }

            if (code === 'zoomOut') {
                const ratioOut = 1 / (1 - 0.05);
                graph.zoomTo(currentZoom * ratioOut);
            }

            if (code === 'zoomIn') {
                const ratioIn = (1 - 0.05);
                graph.zoomTo(currentZoom * ratioIn);
            }
        }
    });
    return toolbar;
}
